<%@page import="com.google.appengine.api.blobstore.BlobstoreServiceFactory"%>
<%@page import="com.google.appengine.api.blobstore.BlobstoreService"%>
<%@page import="java.util.TreeMap"%>
<%@page import="com.tubeonfire.entity.Playlist"%>
<%@page import="com.tubeonfire.model.admin.PlaylistModel"%>
<%@page import="java.text.DecimalFormat"%>
<%@page import="java.util.Locale"%>
<%@page import="java.text.NumberFormat"%>
<%@page import="com.tubeonfire.entity.Tube"%>
<%@page import="com.tubeonfire.service.YoutubeService"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	YoutubeService tubeService = (YoutubeService) request.getAttribute("result");
	PlaylistModel plModel = (PlaylistModel)request.getAttribute("plModel");
	BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService();
	String currentPl = (String)session.getAttribute("currentPlaylist");
	TreeMap recentAddTreeId = (TreeMap)session.getAttribute("recentAddTreeId");
	if(recentAddTreeId==null){
		recentAddTreeId = new TreeMap();
	}	
	if(currentPl==null||currentPl.length()==0){
		currentPl = "";
	}
	String url = "";	
	if(tubeService==null){
		tubeService = new YoutubeService();		
		YoutubeService.setTooManyRecentCallError(false);
	}		
	String type = (String)request.getAttribute("type");
	if(type==null||type.isEmpty()){
		type = "2";
	}
	url += "?type=" + type;
	String quanlity = (String)request.getAttribute("quanlity");
	if(quanlity==null||quanlity.isEmpty()){
		quanlity = "1";
		
	}
	url += "&quanlity=" + quanlity;
	String keyword = (String)request.getAttribute("keyword");
	if(keyword!=null&&!keyword.isEmpty()){
		url += "&keyword=" + keyword;
	}	
	NumberFormat nf = NumberFormat.getNumberInstance(Locale.US); 		
%>
<jsp:include page="/admin/elements/header.jsp">
	<jsp:param value="Youtube Search" name="title"/>
</jsp:include>
<script type="text/javascript" src="/admin/js/mine/youtube_search.js"></script>
<script type="text/javascript" src="/admin/js/custom/tables.js"></script>
<script type="text/javascript" src="/admin/js/custom/general.js"></script>
	<body class="loggedin">
		<jsp:include page="/admin/elements/top.jsp"/>
	    <!-- START OF MAIN CONTENT -->
	    <div class="mainwrapper">
	     	<div class="mainwrapperinner">         	        
				<jsp:include page="/admin/elements/left.jsp">
					<jsp:param value="tube" name="current_page"/>
				</jsp:include>					              	                   
	        	<div class="maincontent noright">
	        		<div class="maincontentinner">	            	
		                <ul class="maintabmenu">
		                	<li class="current"><a href="/admin/youtube/search">Youtube Search</a></li>
		                	<li><a href="/admin/tube/list">Tube Manager</a></li>		
		                	<li><a href="/admin/tube/slideshow">Slide Show Manager</a></li>		
		                </ul><!--maintabmenu-->	                
	                	<div class="content">		
	                	<jsp:include page="/admin/elements/message.jsp"/>	                	
	                	<div id="messageDiv" class="notification hidden">		
	                		<a class="close"></a>				    
						    <p></p>
						</div>
	                	
	                	<%
	                		if(tubeService.isTooManyRecentCallError()){
	                			%>
	                			 <div class="notification msgalert">
							         <a class="close"></a>
							         <p>Hey, you made too many call to Youtube Server. Stay awhile and relax, try <a href="<%=url%>&page=<%=tubeService.getPage()%>" title="Click here to refresh page">refresh this page</a> after a few seconds or <a href="<%=url%>&page=<%=tubeService.getPage()%>" title="Click here to refresh page">just click here</a> !</p>
							     </div>      
	                			<%
	                		}
	                	%>		                	  	                	         
	                		<form id="youtubeSearch" class="stdform" method="get" action="/admin/youtube/search">
	                			<p>
		                        	<label>Search Type</label>
		                            <span class="field">
			                            <select name="type" id="selection" style="min-width: 18%">
			                            	<option value="2" <%=(type.equals("2"))?"selected":""%>>By Keyword</option>
			                            	<option value="1" <%=(type.equals("1"))?"selected":""%>>By Channel</option>			                            				                                			                                
			                                <option value="3" <%=(type.equals("3"))?"selected":""%>>By Youtube Link</option>			                               
			                            </select>			                           
		                            </span>
		                        </p>     
		                        <p>
		                        	<label>Quanlity</label>
		                            <span class="field">
			                            <select name="quanlity" id="selection" style="min-width: 18%">			                            	
			                                <option value="1" <%=(quanlity.equals("1"))?"selected":""%>>All</option>
			                                <option value="2" <%=(quanlity.equals("2"))?"selected":""%>>HQ Only</option>			                               
			                            </select>
		                            </span>
		                        </p>    
		                    	<p>
		                        	<label>Keyword</label>
		                            <span class="field">
		                            	<input type="text" style="font-style: italic;" name="keyword" id="formKeyword" class="<%=type.equals("1")?"input":"mediuminput"%>" value="<%=(keyword!=null&&keyword.length()>0)?keyword:"Type something and hit enter..."%>">
		                            	 <%
			                            	if(type.equals("1")){
			                            		%>
			                            		<a href="#popwizard01" class="stdbtn btn_black" style="opacity: 1; " id="getAllFromChannel">Get All Channel's Videos</a> 				                            		
			                            		<%
			                            	}
			                            %>
		                            </span>		                            
		                        </p>                                                                        		                                                                    		                  
		                        <p class="stdformbutton">
		                        	<button class="submit radius2" id="btnSubmitSearch">Search</button> 		                        			                        	
		                        </p>
                   			</form>	                    
	                    	<div class="contenttitle radiusbottom0">
			                	<h2 class="table"><span>Search Result</span></h2>
			                </div>			          
			                <%			                	
			                	if(plModel!=null){
			                %>	     
			                <div class="tableoptions">			               		                
			                    <select class="radius3 playlist" id="listCategory">
			                    	<option value="" <%=(currentPl.isEmpty()?"selected":"") %>>Select Playlist</option>
			                    	<%
			                    		for(Playlist pl : plModel.getListResult()){			                    						                    		
			                    	%>
			                        	<option <%=(currentPl.equals(pl.getId())?"selected":"") %> value="<%=pl.getId()%>"><%=pl.getTitle() %></option>
			                        <%
			                			}
			                        %>
			                    </select> &nbsp;
			                    <button class="radius3" id="addAllToList">Add To Playlist</button>
			                    <span style="opacity:0.6">or <a href="/admin/playlist/add" title="Create new playlist">create new</a></span>
			                    <small class="desc" style="float: right;">(Tips)</small>			                			                  			                   		                    
			                </div>						               
			                <%
			                	}
			                %>
		                    <table id="table-result" cellpadding="0" cellspacing="0" border="0" class="stdtable stdtablecb">		                    
			                    <colgroup>
			                        <col class="con0">
			                        <col class="con1">
			                        <col class="con0">
			                        <col class="con1">
			                        <col class="con0">
			                        <col class="con1">
			                        <col class="con0">
			                    </colgroup>
			                    <thead>
			                        <tr>
			                        	<th class="head0"><span class="checkbox"><input type="checkbox" class="checkall"></span></th>
			                            <th class="head1">Thumb</th>
			                            <th class="head0">Title</th>
			                            <th class="head1">Duration</th>
			                            <th class="head0">Views</th>
			                          	<th class="head1">Action</th>
			                        </tr>
			                    </thead>
			                    <tfoot>
			                        <tr>
			                        	<th class="head0"><span class="checkbox"><input type="checkbox" class="checkall"></span></th>
			                            <th class="head1">Thumb</th>
			                            <th class="head0">Title</th>
			                            <th class="head1">Duration</th>
			                            <th class="head0">Views</th>			                            
			                            <th class="head1">Action</th>
			                        </tr>
			                    </tfoot>
			                    <tbody>
			                    	<%
										if(tubeService!=null&&tubeService.getListResult().size()>0){
											for(Tube tube: tubeService.getListResult()){
									%>
				                        <tr <%=recentAddTreeId.get(tube.getId())!=null?"class='recent-add'":"" %> >
				                        	<td class="center"><span class="checkbox"><input type="checkbox" value="<%=tube.getId()%>"></span></td>
				                            <td class="center">
				                            	<img src="<%=tube.getImageUrl() %>" alt="" width="100px">
				                            </td>
				                            <td><%=tube.getTitle() %></td>
				                            <td class="center"><%=tube.getTotalTime() %></td>
				                            <td class="center"><%=nf.format(tube.getYoutubeView())%></td>				                           
				                            <td class="center">				                            	
				                            	<a href="#popwizard" id="<%=tube.getId()%>" title="<%=tube.getTitle() %>" class="inline stdbtn" style="opacity: 1; "><span>Add</span></a>
				                            	<div style="display: none;" class="tubeTitle"><%=tube.getTitle() %></div>
				                            	<div style="display: none;" class="tubeDescription"><%=tube.getDescription() %></div>
				                            </td>
				                        </tr>
			                        <%
											}
										}
			                        %>			                        		                       
			                    </tbody>
			                </table>                                      	                    	 
	                    	              	
	                    	<div class="dataTables_paginate paging_full_numbers" id="dyntable_paginate" style="border: none">	
	                    		<%
	                    			int showing = (tubeService.getPage()-1)*tubeService.getLimit() + 1;
	                    			int to = ((tubeService.getPage()-1)*tubeService.getLimit()) + tubeService.getListResult().size();
	                    			if(to==0){
	                    				showing = 0;
	                    			}
	                    		%>                    	
	                    		<span style="float: left;">Showing <b><%=showing %></b> to <b><%=to %></b> of <b id="totalVideos"><%=nf.format(tubeService.getTotalResult()) %></b> videos</span>
	                    		<%
		                    		if(tubeService.getTotalPage()>1){		                    	
		                    			if(tubeService.getPage()>1){
		                    				%>		                    						                    				
		                    				<a href="<%=url%>&page=<%=tubeService.getPage()-1%>"><span class="first paginate_button paginate_button_disabled">Previous</span></a>	                    				
		                    				<%
	                    				}
	                    		%>
	                    		<span>
	                    		<%		  
	                    			int startPage = 1;
	                    			int endPage = 7;
	                    			int currentPage = tubeService.getPage();
	                    			int totalPage = tubeService.getTotalPage();
	                    			if(currentPage<=3){
	                    				startPage = 1;
	                    				if(totalPage >= 7){
	                    					endPage = 7;	
	                    				}else{
	                    					endPage = totalPage;
	                    				}	                    					
	                    			}else{	
	                    				startPage = currentPage - 3;
	                    				if((totalPage-currentPage)>3){
	                    					endPage = currentPage + 3;	
	                    				}else{
	                    					endPage = totalPage;
	                    					startPage = totalPage - 6;
	                    					if(startPage<=0){
	                    						startPage = 1;
	                    					}	                    					
	                    				}		                    			
	                    			}	                    			
			                  		for(int i = startPage;i<=endPage;i++){
			                  			if(tubeService.getPage()==i){
			                  				%>  
				                    		<span class="paginate_active"><%=i %></span>
	                    					<%
			                  			}else{
			                  				%>
			                  				<a href="<%=url%>&page=<%=i%>"><span class="paginate_button"><%=i %></span></a>
			                  				<%
			                  			}
			                  		}	                    			
	                    		%>
	                    		</span>
	                    		<%
			                    		if(tubeService.getTotalPage()>tubeService.getPage()){
		                    				%>
		                    				<a href="<%=url%>&page=<%=tubeService.getPage()+1%>"><span class="next paginate_button">Next</span></a>	                    				
		                    				<%
		                    			}
		                    		}
		                    	%>	
                    		</div>               	              	                    	              
	                    <br /><br />	                    
	                </div><!--content-->	                
	            </div><!--maincontentinner-->
				<jsp:include page="/admin/elements/bottom.jsp"></jsp:include>                    	           	
	        </div><!--maincontent-->	                        
	     	</div><!--mainwrapperinner-->
	    </div><!--mainwrapper-->
		<!-- END OF MAIN CONTENT -->
		<div id="opacity"></div>
		<img id="image_loadder" src="/admin/images/ajax-loader.gif">    
		<div style="display: none;">		
        	<div id="popwizard">
        	<form class="stdform" method="post" enctype="multipart/form-data" action="<%=blobstoreService.createUploadUrl("/admin/tube/process") %>" id="addForm">
        		<input type="hidden" name="action" value="add-to-category-from-youtube"/>
        		<input type="hidden" name="url" value="<%=request.getAttribute("url")%>"/>
        		<input type="hidden" name="id" value=""/>        		
	        	<div class="one_half">
	            	<iframe id="ytplayer" width="588" height="340"
										  src="http://www.youtube.com/embed/fWNaR-rxAic?autoplay=0&origin=http://example.com"></iframe>				  
	            </div>
            	<div class="one_half last">            	        			
                        <div id="wizard4" class="wizard">                                                          
                            <div id="wiz1step4_1" class="formwiz">    
                            	<p>
									<label>Choose playlist</label>		
									<%
                                    	if(plModel!=null){
                                    %>							
                                    <span class="field">                                    
                                    	<select name="playlist">
	                                    	<%
					                    		for(Playlist pl : plModel.getListResult()){			                    						                    		
					                    	%>
					                        	<option <%=(currentPl.equals(pl.getId())?"selected":"") %> value="<%=pl.getId()%>"><%=pl.getTitle() %></option>
					                        <%
					                			}
					                        %>                                            	                                           
                                        </select>                                              	
                                                  
                                    </span>   
                                    <%
                                    	}
                                    %>                                     	                                                                                         
                                </p>                             	                           	                   	                                                     		                                                           
                            	<p>
									<label>Title</label>
			                        <span class="field">
			                             <input type="text" id="title" name="title" value=""/>       
			                             <label for="title" class="error hidden"></label>                            		
			                        </span>
								</p>
								<p>
									<label>Description</label>
			                        <span class="field">
			                        	<textarea cols="57" rows="5" name="description"></textarea>		
			                        	<label for="description" class="error hidden"></label>    	                        	                                	
			                        </span>
								</p>
								<p>
									<label>Cover Image</label>
                                   	<span class="field">
                                   		<input type="file" id="img" name="img"/>   
                                   		<label for="img" class="error hidden"></label>                                  		
                                   </span>
								</p>
								<p>
		                        	<label>Tags</label>
		                            <span class="field">		                            	
		                            	<input type="text" name="tags" id="tags" value=""/>		                            	
									</span>
									<small class="desc">Separated by comma. Example : "tag, my tag, your tag".</small>
		                        </p>                                                                    
                                 <p>
                                 	<label></label>
                                    	<span class="field">
	                                    	<button class="stdbtn" style="opacity: 1;" id="btnSubmit">Save</button>	                                     	   
                                		</span>    
                                 </p>                                                                                                                                                                                  
                            </div>                                                                    
                        </div>               
            		</div>   
            	</form>     		
       		</div>
        </div>
		<div style="display: none;">
			<div id="popwizard01" style="padding: 20px">				
				<div id="wizard4" class="wizard">
					<div class="stepContainer"">
						<div id="wiz1step4_1" class="formwiz content" style="display: block;">
							<form class="stdform stdform2" action="" method="get" id="channelForm">							
								<h2>Add All Channel's Videos</h2>
								<br>	
								<p>
									<label>Channel Name</label> 
									<span class="field" id="channelName">
										2ne1
									</span>
								</p>	
								<p>
									<label>Total Videos</label> 
									<span class="field" id="totalVideo">
										1000
									</span>
								</p>
								<p>
									<label>Playlist to add </label>
									<%
	                                    	if(plModel!=null){
	                                    %>
									<span class="field">
										<select name="playlist">
												<%
							                    		for(Playlist pl : plModel.getListResult()){			                    						                    		
							                    	%>
												<option <%=(currentPl.equals(pl.getId())?"selected":"") %> value="<%=pl.getId()%>"><%=pl.getTitle() %></option>
												<%
							                			}
							                    %>
										</select>	
										<span style="opacity:0.6">or <a href="/admin/playlist/add" title="Create new playlist">create new</a></span>
									</span>
									<%
	                                    	}
	                                    %>
								</p>
		                        <p class="stdformbutton">		
		                        	<label></label>                        	
		                        	<button class="radius2" id="btnSubmitChannel">Save</button>		                            
		                        </p>
	                        </form>
	                        <br clear="all" />
							<div class="notification msginfo">
							    <a class="close"></a>
							    <p style="border: none;">This channel's videos will be gotten automatic. (Maximum 49 videos per day)</p>
							</div>
						</div>							
					</div>						
				</div>				
			</div>			
		</div>
</body>	
</html>
